<template>
  <div style="height: 100%">
    <el-table :data="all_demand_group" stripe height="100%" @current-change="loadCurrent">
      <el-table-column
        v-for="column in tableColumns"
        :key="column.code"
        :prop="column.code"
        :label="column.name"
        :width="column.width ? column.width : 100"
        :formatter="
          (row, column, cellValue, index) => {
            return cell_formatter(column, cellValue, tableColumns)
          }
        "
      />
      <el-table-column label="明细" :width="220">
        <template #default="scope">
          <el-button size="small" @click="show_group_detail_panel = true"> 明细 </el-button>
          <el-button size="small" :disabled="scope.row.computed" @click="show_choice_panel = true"
            >选料</el-button
          >
          <el-button size="small" :disabled="scope.row.computed" type="primary" @click="compute"
            >运算</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-dialog v-model="show_group_detail_panel" title="明细">
      <el-divider></el-divider>
      <el-table :data="current_group_detail" style="width: 100%; height: 500px">
        <el-table-column
          v-for="column in divide_demand_define"
          :key="column.code"
          :prop="column.code"
          :label="column.name"
          :width="column.width ? column.width : 100"
          :formatter="
            (row, column, cellValue, index) => {
              return cell_formatter(column, cellValue, divide_demand_define)
            }
          "
        />
      </el-table>
      <template #footer>
        <el-button type="primary" @click="show_group_detail_panel = false">确认</el-button>
      </template>
    </el-dialog>

    <el-dialog @opened="fillSelected" v-model="show_choice_panel" title="选料">
      <el-divider></el-divider>
      <el-table :data="current_choice_detail" style="width: 100%; height: 500px">
        <el-table-column label="优先级">
          <template #default="scope">
            <el-select size="small" v-model="scope.row.seq" style="width: 100px">
              <el-option-group label="无限库存">
                <el-option label="仅算料" :value="1"></el-option>
              </el-option-group>
              <el-option-group label="库存限制">
                <el-option label="首选" :value="2"></el-option>
                <el-option label="次选" :value="3"></el-option>
                <el-option label="候补" :value="4"></el-option
              ></el-option-group>
              <el-option-group>
                <el-option label="不算料" :value="100"></el-option
              ></el-option-group>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="length" label="长度" />
        <el-table-column
          prop="metal"
          label="材质"
          :formatter="
            (row, column, cellValue, index) => {
              return row.metal.name
            }
          "
        />
        <el-table-column
          prop="section"
          label="截面"
          :formatter="
            (row, column, cellValue, index) => {
              return row.section.name
            }
          "
        />
        <el-table-column prop="stock_qty" label="库存件数" />
      </el-table>
      <template #footer>
        <el-button type="primary" @click="confirm_choice">确认</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { divide_demand_define, divide_demand_sum_define } from '@/meta/index'
import { useDbStore } from '@/stores/modules/database'
import type { divide_demand, divide_demand_sum, stick_propose_group } from '@/types/billdata'
import type { t_sticks_width_options } from '@/types/producedata'
import { fill_ref_info, cell_formatter, compare_obj, distinct } from '@/utils/common'
import { stick_usage_cal } from '@/utils/divideUsageCal'
import { ElMessageBox, type ElTable } from 'element-plus'
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
const dbStore = useDbStore()
const router = useRouter()
const all_demand_group = ref<divide_demand_sum[]>()
const show_group_detail_panel = ref<boolean>(false)
const show_choice_panel = ref<boolean>(false)
const tableColumns = divide_demand_sum_define
const all_choice_detail = ref<t_sticks_width_options[]>()
const current_choice_detail = ref<t_sticks_width_options[]>()
const current_group_detail = ref<divide_demand[]>()
const current_bill = ref<divide_demand_sum>()
const loadCurrent = (val: divide_demand_sum) => {
  current_bill.value = val
  const tmp: divide_demand[] = []
  val.divide_detail.forEach((s) => {
    s.divide_demand_details.forEach((t) => {
      tmp.push(t)
    })
  })
  fill_ref_info(tmp, divide_demand_define)
  current_group_detail.value = tmp
}
all_choice_detail.value = dbStore.stick.map((r) => {
  return {
    length: r.length,
    metal: r.metal,
    section: r.section,
    stock_qty: r.qty,
    seq: 100
  }
})
const fillSelected = () => {
  const tmp = all_choice_detail.value!.filter(
    (r) =>
      compare_obj(r.section, current_bill.value!.section, 'code') &&
      compare_obj(r.metal, current_bill.value!.metal, 'code')
  )
  tmp.forEach((r) => {
    r.seq = current_bill.value?.supply_length.find((s) => r.length === s.length)?.seq
    if (!r.seq) r.seq = 100
  })
  current_choice_detail.value = tmp
}

const compute = () => {
  const stick_propose = stick_usage_cal(current_bill.value!)!
  const other_propose = dbStore.stick_propose.filter((r) => r.groupcode != stick_propose.groupcode)
  other_propose.push(stick_propose)
  dbStore.saveStickProposeGroup(other_propose)
  current_bill.value!.computed = true
  dbStore.saveDivideDemandSum(all_demand_group.value!)
  router.push({ path: '/divideProposeList' })
}
const confirm_choice = () => {
  const selected = current_choice_detail.value
    ?.filter((r) => r.seq !== 100)
    .sort((a, b) => {
      return a.seq! - b.seq!
    })
  const seq_idx = selected!.map((r) => r.seq)
  if (
    seq_idx.filter((r) => r === 1).length > 1 ||
    (seq_idx.filter((r) => r === 1).length === 1 && seq_idx.length > 1)
  ) {
    ElMessageBox.alert('仅算料只支持一个规格', '错误')
    return
  }
  if (distinct(selected!.map((r) => r.seq))?.length !== selected!.length) {
    ElMessageBox.alert('不允许相同的优先级', '错误')
    return
  }
  current_bill.value!.supply_length.length = 0
  selected?.forEach((r) => {
    current_bill.value!.supply_length.push({ length: r.length, seq: r.seq! })
  })
  show_choice_panel.value = false
}
onMounted(() => {
  const divide_demand_sum = dbStore.divide_demand_sum
  fill_ref_info(divide_demand_sum, divide_demand_sum_define)
  all_demand_group.value = divide_demand_sum
})
</script>
